<template>
    <label class="notes">
      <span>{{fieldName}}</span>
      <input v-model="note" type="text" @focusout="getNote" :placeholder="placeholder">
    </label>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

@Component
export default class Notes extends Vue {
  @Prop({required:true}) fieldName!: string;
  @Prop({default:'请输入内容'}) placeholder!: string;

  getNote() {
    this.$store.commit('updateRecord',{'name':'note',value:this.note})
  }

  get note(){
    return this.$store.state.record.note
  }

  set note(value){
    this.$store.state.record.note = value
  }


}
</script>

<style lang="scss" scoped>
.notes {
  display: flex;
  align-items: center;
  padding-left: 16px;
  background-color: #e5e5e5;

  span {
    font-size: 14px;
    padding-right: 16px;
  }

  input {
    font-size: 16px;
    padding: 16px 0;
    background-color: transparent;
    border: none;
    flex-grow: 1;
    opacity: 0.6;

    &:focus {
      outline: none;
    }
  }
}
</style>